<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aquo Events</title>
<link href="../../../widgets/htmlpanel/SpryHTMLPanel.css" rel="stylesheet" type="text/css" />
<script src="../../../widgets/htmlpanel/SpryHTMLPanel.js" type="text/javascript"></script>
<script src="../../../includes/SpryEffects.js" type="text/javascript"></script>
</head>
<body>
<p>
<a href="data/AquoThon.html" onclick="hp.loadContent(this.href, { id: 'event' }); return false;">Aquo-Thon</a> |
<a href="data/AquoSwing.html" onclick="hp.loadContent(this.href, { id: 'event' }); return false;">Aquo Swing</a> |
<a href="data/AquoUltraMarathon.html" onclick="hp.loadContent(this.href, { id: 'event' }); return false;">Aquo Ultra Marathon</a> |
<a href="data/AquoExtremeSki.html" onclick="hp.loadContent(this.href, { id: 'event' }); return false;">Aquo Extreme Ski</a> |
<a href="data/non-existent-file.html" onclick="hp.loadContent(this.href, { id: 'event' }); return false;">Non-Existent File</a>
</p>
<div id="event">
	<h2 class="name">Aquo-Thon</h2>
	<div class="info">		
		<div class="location">Whistler, British Columbia</div>
		<div class="date">May 26th</div>
		<p class="description">Join us in Whistler as Extreme Mountain bikers take on the hills and curves of British Columbia.</p>
		<a href="#">directions...</a>
	</div>
	<div class="HTMLPanelLoadingContent">Loading ...</div>
	<div class="HTMLPanelErrorContent">Failed to load content!</div>
</div>
<script type="text/javascript">
var hp = new Spry.Widget.HTMLPanel("event");

hp.addObserver(function(notificationType, notifier, data)
{
	if (notificationType == "onPreUpdate")
	{
		// We are about to replace the content of the panel with the
		// content we just received from the server. Set the background
		// of the panel to yellow to draw the user's attention to the panel.

		document.getElementById("event").style.backgroundColor = "#FF0";
	}
	else if (notificationType == "onPostUpdate")
	{
		// We are done replacing the content within the panel. Fire off
		// a Highlight effect to slowly change the panel's background
		// from yellow, back to white.

		Spry.Effect.DoHighlight("event", { to: "#FFF", duration: 1000 });
	}
});
</script>
</body>
</html>
